<template>
  <div class="table-box">
    <ProTable :pagination="false" :request-api="list" :init-param="initParams" :columns="columns" ref="proRef">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">创建平台</el-button>
        <el-button type="danger" @click="deleteItem(scope.selectedListIds)">批量删除</el-button>
      </template>
      <template #expand="{ row }">
        <div class="p-[20px]">
          <div>
            <p class="font-semibold">佣金</p>
            <div>
              {{ row.settlement }}
            </div>
          </div>
          <div class="mt-[10px]">
            <p class="font-semibold">结算条件</p>
            <div>
              {{ row.commission }}
            </div>
          </div>
          <div class="mt-[10px]">
            <p class="font-semibold">判客规则</p>
            <div>
              {{ row.judge_rules }}
            </div>
          </div>
        </div>
      </template>
      <template #update_time="{ row }">
        {{ dayjs(row.update_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link @click="opera(row)">编辑</el-button>
        <el-button type="danger" link @click="deleteItem([row.id])"> 删除</el-button>
      </template>
    </ProTable>
    <PlatformDrawer ref="platRef"></PlatformDrawer>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import ProTable from "@/components/ProTable/index.vue";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { list, add, edit, deleteApi } from "@/api/modules/platform";
import { ColumnProps } from "@/components/ProTable/interface";
import PlatformDrawer from "./components/drawer.vue";
import { useHandleData } from "@/hooks/useHandleData";

const proRef = ref<InstanceType<typeof ProTable> | null>();
const platRef = ref<InstanceType<typeof PlatformDrawer> | null>();

const route = useRoute();

const initParams = reactive({ lou_pan_id: parseInt(route.query.id as string) });

const columns: ColumnProps[] = [
  { type: "selection", label: "", width: 60 },
  { type: "expand", label: "#" },
  { prop: "sort", label: "排序" },
  { prop: "name", label: "平台名称" },
  { prop: "commission", label: "佣金" },
  { prop: "settlement", label: "结算条件" },
  { prop: "judge_rules", label: "判客规则" },
  { prop: "update_time", label: "更新时间" },
  { prop: "opera", label: "操作" }
];
const opera = (row: any) => {
  const params: any = {
    row: row
      ? row
      : { sort: 100, name: "", settlement: "", commission: "", judge_rules: "", lou_pan_id: parseInt(route.query.id as string) },
    api: row ? edit : add,
    getTable: proRef.value?.getTableList
  };
  platRef.value?.open(params);
};

const deleteItem = async (ids: any) => {
  try {
    await useHandleData(deleteApi, { ids, lou_pan_id: parseInt(route.query.id as string) }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
